<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--<script src="js/style.js"></script>-->

	</head>
	<body>
		
	</body>
			<script language="JavaScript">
//1.定义地图类
function Map(){
	//1.1定义地图的属性
	this.width = 800;
	this.height = 400;
	this.color = "gray";
	this.position = "absolute";
	
	//1.2定义show方法，用于显示地图
	this.show = function(){
		//生成div元素，用于放置地图
		var div = document.createElement('div');
		//为div元素生成属性
		div.style.width = this.width+"px";
		div.style.height = this.height+"px";
		div.style.backgroundColor = this.color;
		div.style.position = this.position;
		//把div放入body元素中
		document.getElementsByTagName('body')[0].appendChild(div);
	}
}
//2.定义实物类
function Food(){
	//2.1定义事物的属性
	this.width = 20;
	this.height = 20;
	this.color = "green";
	this.position = "absolute";
	this.x = 0;//40
	this.y = 0;//20
	//2.2定义show方法，用于随机显示食物
	this.show = function(){
		//生成div元素，用于放置食物
		var div = document.createElement('div');
		//为div元素生成属性
		div.style.width = this.width+'px';
		div.style.height = this.height+'px';
		div.style.backgroundColor = this.color;
		div.style.position = this.position;
		div.style.left = this.x*20+'px';
		div.style.top = this.top*20+'px';
		//把生成的div追加到地图中
		map._map.appendChild(div);
		//随机显示食物的坐标
		var left,top;
		left = Math.floor(Math.random()*40);
		top = Math.floor(Math.random()*20);
	}
	
}
//3.定义蛇类
function Snake(){
	//3.1定义相关的属性和方法
	this.width = 20;
	this.height = 20;
	this.position = 'absolute';
	//定义蛇节
	this.body = [[3,2,'red'],[2,2,'blue'],[1,2,'blue']];
	//定义show方法，显示蛇类
	this.show = function(){
		var length = this.body.length;
		for(var i=0;i<length;i++){
			var div = document.createElement('div');
			div.style.width = this.width+'px';
			div.style.height = this.height+'px';
			div.style.position = this.position;
			div.style.left = this.body[i][0]*20+'px';
			div.style.top = this.body[i][1]*20+'px';
			div.style.backgroundColor = this.body[i][2];
			//追加div到map地图中
			map._map.appendChild(div);
		}
	}
	this.move = function(){
		//获取蛇节
		var length = this.body.length;
		for(var i=length-1;i>0;i--){
			this.body[i][0] = this.body[i-1][0];
			this.body[i][1] = this.body[i-1][1];
		}
		//判断蛇的运动方向
		if(this.direct == 'left'){
			this.body[0][0] -= 1;
		}
		if(this.direct == 'right'){
			this.body[0][0] += 1;
		}
		if(this.direct == 'up'){
			this.body[0][1] -= 1;
		}
		if(this.direct == 'down'){
			this.body[0][1] += 1;
		}
		//判断是否吃到食物
		if(this.body[0][0] == food.x&&this.body[0][1]==food.y){
			//吃到食物，增加身体
			this.body.push([0,0,'blue',null]);
			//重新显示食物坐标
			food.show();
		}
		//重新显示蛇类
		this.show();
	}
	//定义setDirect方法，用于判断蛇的运动方向
	this.setDirect = function(){
		switch(code){
			case 37:
				this.direct = 'left';
				break;
			case 38:
				this.direct = 'up';
				break;
			case 39:
				this.direct = 'right';
				break;
			case 40:
				this.direct = 'down';
				break;
		}
	}
	//
}

//4.定义页面载入事件
window.onload=function(){
	//实例化地图
	var map = new Map();
	//显示地图
	map.show();
	
	//实例化食物
	var food = new Food();
	//显示食物
	food.show();
	
	//实例化蛇类
	var snake = new Snake();
	//显示蛇
	snake.show();
	
	snake.move();
	setInterval("snake.move",300);
	
	document.onkeydown = function(event){
		//定义一个code
		var code;
		if(window.event){
			code=window.event.keyCode;
		}else {
			code = event.keyCode;
		}
		snake.setDirect(code);
	}
}
</script>
</html>
